<template>
    <div>
        <div class="select-table-wrapper" v-if="!isQuNumber">
            <div class="list-container">
                <div class="list">
                    <div class="item"
                         v-for="(item, index) in dinner_count"
                         :key="index"
                         @click="toggleActive(item, 'list')">
                        <div class="item-item" :class="renderCss(item, 'list')">{{item}}</div>
                    </div>
                </div>
            </div>
            <div class="table">
                <div class="item"
                     v-for="(item, index) in desk_cate_info"
                     :key="index"
                     :class="renderClass(item)">
                    <span v-if="item.disabled">{{item.cate_name}}</span>
                    <span @click="selectTable(item)" v-else>{{item.cate_name}}</span>

                </div>
            </div>
            <div class="sure">
                <span @click="sureSelect">确定选择</span>
            </div>
        </div>
        <div v-else>
            <div class="que-ue-wrapper">
                <div class="container">
                    <div class="circle">
                        <img src="../components/common/img/check.svg"/>
                    </div>
                </div>
                <div class="container">
                    <div class="sureMessage">取号成功！</div>
                </div>
                <div class="title">
                    <span>{{quNumberInfo.store_name}}</span>
                    <span>{{quNumberInfo.number}}</span>
                </div>
                <ul class="list">
                    <li class="listItem">
                        <span>{{quNumberInfo.create_time}}</span>
                        <span>{{quNumberInfo.desk_cate_name}}</span>
                    </li>
                    <li class="listItem">
                        <span>还需等待</span>
                        <span>{{quNumberInfo.queue_count}}桌</span>
                    </li>
                    <li class="listItem">
                        <span>预计等待</span>
                        <span>{{quNumberInfo.wait_min}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from '../plugins/axios';
    import _ from 'lodash'
    import {Indicator, Toast} from 'mint-ui';
    export default {
        async asyncData ({res, req, error}) {
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let store_id = req.query.store;
            let response = {};
            try {
                response = await axios.get('/api/h5/customer/queue', {
                    params: {
                        store_id: store_id,
                        token
                    }
                });
                response = response.data.data || {};
                _.each(response.desk_cate_info, (d) => {
                    d.disabled = true
                })
            } catch (e) {
                error({});
            }
            return {
                userInfo,
                token,
                store_id,
                ...response
            }
        },
        head () {
            return {
                title: '排队扫码',
            }
        },
        data(){
            return {
                activeId: '',
                num: '',
                activeTable: {},
                isQuNumber: false,
                quNumberInfo: {}
            }
        },
        mounted(){

        },
        methods: {
            toggleActive(num){
                this.activeTable = {};
                this.num = num;
                _.each(this.desk_cate_info, (item) => {
                    if (item.range_max >= num && item.range_min <= num) {
                        item.disabled = false
                    } else {
                        item.disabled = true
                    }
                });
                this.activeId = `list-${num}`;
            },
            renderCss(num, type){
                if (this.activeId == `${type}-${num}`) {
                    return 'item-active'
                } else {
                    return ''
                }
            },
            renderClass(item){
                if (item.disabled) {
                    return 'disabled'
                }
                if (item.desk_cate_id == this.activeTable.desk_cate_id) {
                    return 'active'
                }

            },
            selectTable(item){
                this.activeTable = item
            },
            sureSelect(){
                if (this.activeId && Object.keys(this.activeTable).length > 0) {
                    Indicator.open('正在提交信息...');
                    let store_id = this.store_id;
                    let desk_cate_id = this.activeTable.desk_cate_id;
                    axios.post('/api/h5/customer/queue', {
                        store_id: store_id,
                        desk_cate_id: desk_cate_id,
                        dinner_count: this.num,
                        wechat_user: this.userInfo.id,
                        token: this.token
                    }).then(res => {
                        Indicator.close();
                        if (res.data.error === 0) {
                            this.quNumberInfo = res.data.data;
                            this.isQuNumber = true;
                            setTimeout(() => {
                                window.location.href = `inNumber?store=${store_id}&table=${desk_cate_id}`
                            }, 2000);
                        } else {
                            Toast(res.data.desc || '系统错误')
                        }

                    })
                } else {
                    Toast('请先选择就餐人数和桌台')
                }

            }
        }
    }
</script>
<style lang="less" scoped>
    .select-table-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: center;
        padding-bottom: 20px;
        .list-container {
            display: flex;
            justify-content: center;
        }
        .list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 48px 0 28px 0;
            width: 80%;
            .item {
                width: 33%;
                height: 60px;
                margin-bottom: 20px;
                text-align: center;
                display: flex;
                justify-content: center;
                .item-item {
                    background: #FFFFFF;
                    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
                    border-radius: 50%;
                    line-height: 60px;
                    width: 60px;
                    text-align: center;
                    font-size: 18px;
                    cursor: pointer;
                }
                .item-active {
                    background-image: linear-gradient(-38deg, #FFEB00 3%, #FFD200 60%);

                }
            }
        }
        .table {
            display: flex;
            font-size: 18px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 33px;
            width: 80%;
            margin-left: 10%;
            .item {
                width: 40%;
                height: 40px;
                line-height: 40px;
                border: 1px solid #000000;
                border-radius: 20px;
                text-align: center;
                margin: 0 10px 15px 10px;
                &.active {
                    color: #FFD200;
                    border: 2px solid #FFD200;
                }
                &.disabled {
                    color: #B3B3B3;
                    border: 1px solid #B3B3B3;
                }
                span {
                    width: 100%;
                    display: block;
                }
            }
        }
        .sure {
            display: flex;
            justify-content: center;
            text-align: center;
            height: 44px;
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 0.22px;
            line-height: 44px;
            span {
                width: 80%;
                text-decoration: none;
                display: inline-block;
                color: #FFFFFF;
                background: #000000;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
                border-radius: 21px;
            }
        }
    }

    .que-ue-wrapper {
        height: 100vh;
        padding: 20px;
        .container {
            display: flex;
            justify-content: center;
            .circle {
                width: 105px;
                height: 105px;
                border-radius: 50%;
                background-image: linear-gradient(-38deg, #FFEB00 3%, #FFD200 60%);
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 48px;
                    height: 48px;
                }
            }
            .sureMessage {
                font-size: 24px;
                padding: 30px 0 60px 0;
            }
        }
        .title {
            font-size: 18px;
            color: #000000;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #EDEDED;
            border-bottom: 1px solid #EDEDED;
            height: 60px;
            line-height: 60px;
        }
        .list {
            .listItem {
                height: 40px;
                line-height: 40px;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
            }
            .listItem + .listItem {
                border-top: 1px solid #EDEDED;
            }
        }
    }
</style>